<template>
  <div class="index">
    <div v-if="this.$cookies.isKey('username')" class="nav">
      <transition name="el-zoom-in-center">
        <img v-show="isShow"  alt="Vue logo" src="../assets/success.png" height="100px" width="100px">
      </transition>

      <br>
      <div class="username"> 欢迎您
        <el-avatar class="avatar"> {{this.$cookies.get('username')}} </el-avatar>
        登出：<el-button @click="logout" type="danger" icon="el-icon-top-right" circle></el-button>
      </div>

    </div>
    <div  v-else>
      <span @click="login"> 请点击登陆！ </span> &nbsp; &nbsp;
      <h1>Welcome to index page</h1>
    </div>

    <el-form v-if="this.$cookies.isKey('username')" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="项目名称" prop="projectName">
        <el-input v-model="ruleForm.projectName"></el-input>
      </el-form-item>
      <el-form-item label="影响行数" prop="affecRows">
        <el-input v-model="ruleForm.affecRows"></el-input>
      </el-form-item>
      <el-form-item label="提交类型" prop="type">
        <el-select v-model="ruleForm.type" placeholder="请选择提交类型">
          <el-option label="新增" value="0"></el-option>
          <el-option label="修改" value="1"></el-option>
          <el-option label="优化" value="2"></el-option>
          <el-option label="重构" value="3"></el-option>
          <el-option label="其他" value="4"></el-option>
        </el-select>
      </el-form-item>
<!--      <el-form-item label="提交类型" prop="resource">-->
<!--        <el-radio-group v-model="ruleForm.type">-->
<!--          <el-radio label="新增" value="0"></el-radio>-->
<!--          <el-radio label="修改" value="1"></el-radio>-->
<!--          <el-radio label="优化" value="2"></el-radio>-->
<!--          <el-radio label="重构" value="3"></el-radio>-->
<!--          <el-radio label="其他" value="4"></el-radio>-->
<!--        </el-radio-group>-->
<!--      </el-form-item>-->
      <el-form-item label="提交描述" prop="desc">
        <el-input type="textarea" v-model="ruleForm.desc"></el-input>
      </el-form-item>
<!--      <el-form-item label="没啥用的按钮" prop="delivery">-->
<!--        <el-switch v-model="ruleForm.delivery"></el-switch>-->
<!--      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

import { logoutUrl } from '@/api/login.js'
import { addServer } from '@/api/record.js'
export default {
  name: 'index',
  data () {
    return {
      isShow: true,
      ruleForm: {
        projectName: '',
        affecRows: 0,
        // delivery: false,
        type: null,
        desc: ''
      },
      rules: {
        projectName: [
          { required: true, message: '请输入项目名称', trigger: 'blur' },
          { min: 2, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
        ],
        affecRows: [
          { required: true, message: '请输入影响行数', trigger: 'blur' },
          { min: 0, max: 30, message: '长度在 3 到 30 个数字字符', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选提交类型', trigger: 'change' }
        ],
        desc: [
          { required: true, message: '请填写提交描述', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    logout (){
      this.$axios.get(logoutUrl).then(res => {
        this.$cookies.remove('username')
        this.$message({
          message: '恭喜你，登出成功',
          type: 'success'
        });
        window.location = '/';
      })
    },
    login (){
      window.location = '/';
    },
    closeImg (){
      this.isShow = false
    },
    submitForm (formName) {
      let that = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let formData = {
            'projectName': this.ruleForm.projectName,
            'affecRows': this.ruleForm.affecRows,
            'type': this.ruleForm.type,
            'desc': this.ruleForm.desc
          }
          this.$axios.post(addServer, formData, {
            headers: {
              'Content-Type': 'application/json; charset=utf-8' // hearder 很重要，Content-Type 要写对
            }
          })
            .then(res => {
              // eslint-disable-next-line eqeqeq
              if (res.data.code === 20000) {
                this.$message({
                  message: '恭喜你，提交成功',
                  type: 'success'
                });
              } else {
                this.$message({
                  message: res.data.message,
                  type: 'warning',
                  duration: 5000
                });
              }
            }).catch(function (error) {
              if (error.response.status === 403){
                that.$message({
                  message: '登陆信息过期，请重新登陆',
                  type: 'warning'
                });
              } else {
                that.$message({
                  message: '数据获取失败',
                  type: 'error'
                });
              }
            })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm (formName) {
      this.$refs[formName].resetFields();
    }
  },
  mounted () {
    setTimeout(() => {
      this.closeImg()
    }, 1000)
  }
}
</script>

<style scoped type="text/css" lang="less">
  .username{
    display: inline;
    /*padding-left: 100px;*/
    .avatar{
      margin-right: 100px;
    }
  }
.demo-ruleForm{
  margin: 0 auto;
  /*text-align: center;*/
  width: 400px;
  margin-top: 50px;
}
</style>
